.page-stay {
    position: relative;
    overflow-x: hidden;
    .st-back {
        height: 100%;
        width: 100%;
    }
    .bg {
        position: fixed;
        top: 0;
        left: 0;
        bottom: 0;
        right: 0;
        z-index: -1;
        background: rgb(37, 57, 137);
    }
    .st-header {
        .st-logo {
            position: absolute;
            top: 8px;
            left: 8px;
            width: 70px;
            height: 20px;
        }
        .st-game {
            position: absolute;
            right: 0px;
            top: 6px;
            color: #fff;
            font-size: 10px;
            border: 1px solid #2668c7;
            border-radius: 10px;
            border-top-right-radius: 0px;
            border-bottom-right-radius: 0px;
            padding: 5px 10px 5px 10px;
            background: #2668c7;
        }
    }
    .st-avatar {
        position: absolute;
        top: 30%;
        left: 50%;
        transform: translate(-50%, -50%);
        background: url('https://static.wecity.qq.com/wap/avatar-82d356299cb38e2955c03f1809b243a9.png') no-repeat;
        background-size: 100% 100%;
        width: 68px;
        height: 60px;
        z-index: 9;
        .st-icon {
            position: absolute;
            left: 14px;
            top: 5px;
            z-index: 1;
            border-radius: 50%;
            width: 39px;
            height: 38px;
        }
    }
    .st-title {
        font-size: 10px;
        color: #ffe4ee;
        position: absolute;
        left: 50%;
        top: 36%;
        transform: translate(-50%, -50%);
        .st-sp {
            color: rgb(255, 2, 91);
        }
    }
    .st-content {
        position: absolute;
        top: 39%;
        display: flex;
        flex-wrap: wrap;
        justify-content: space-between;
        color: #fff;
        font-size: 40px;
        width: 100%;
        .st-grand {
            width: 49.5%;
            text-align: center;
            // border-right: 1px solid #fff;
            .st-pr {
                font-size: 14px;
                margin-top: 5px;
            }
        }
        .st-today {
            width: 49.54%;
            text-align: center;
            .st-pr {
                font-size: 14px;
                margin-top: 5px;
            }
        }
    }
    .st-splic {
        position: absolute;
        top: 43%;
        left: 50%;
        transform: translate(-50%, -50%);
        height: 30px;
        width: 1px;
        background: #ffd0e1;
        -webkit-transform: translate(-50%, -50%);
    }
    .st-check {
        position: absolute;
        top: 49%;
        width: 90%;
        height: 35px;
        left: 5%;
        border: 1px solid rgb(21, 37, 101);
        background: #00f0ff;
        font-size: 21px;
        text-align: center;
        line-height: 35px;
        border-radius: 20px;
        letter-spacing: 1px;
    }
    .st-time {
        position: absolute;
        top: 55.5%;
        left: 50%;
        transform: translate(-50%, -50%);
        font-size: 10px;
        color: #ffe4ee;
        -webkit-transform: translate(-50%, -50%);
    }
    .st-integral {
        position: absolute;
        right: 5%;
        top: 59%;
        font-size: 10px;
        color: #ffe4ee;
    }
    .st-invite {
        position: absolute;
        top: 64.5%;
        left: 50%;
        transform: translate(-50%, -50%);
        font-size: 14px;
        color: #00f0ff;
    }
    .st-invites {
        position: absolute;
        top: 67%;
        left: 50%;
        transform: translate(-50%, -50%);
        font-size: 10px;
        color: #ffe4ee;
    }
    .st-boxs {
        position: absolute;
        top: 69.5%;
        left: 18%;
        width: 83%;
        .st-list,
        .st-list2,
        .st-list3,
        .st-list4 {
            width: 53px;
            height: 53px;
            border-radius: 50%;
            border-color: #171f40;
            background: #fff;
            border: 2px solid rgb(23, 31, 64);
        }
        .st-list2 {
            position: absolute;
            left: 20%;
            top: 0;
        }
        .st-list3 {
            position: absolute;
            left: 40%;
            top: 0;
            border: 2px dashed rgb(23, 31, 64);
            .st-plus {
                font-size: 40px;
                text-align: center;
                margin-top: 2px;
            }
        }
        .st-list4 {
            position: absolute;
            left: 60%;
            top: 0;
            border: 2px dashed rgb(23, 31, 64);
            .st-plus {
                font-size: 40px;
                text-align: center;
                margin-top: 2px;
            }
        }
    }
    .st-already {
        position: absolute;
        top: 77.5%;
        left: 20%;
        border: 1px solid rgb(141, 150, 164);
        background: #8d96a4;
        border-radius: 5px;
        color: #fff8fa;
        font-size: 10px;
        transform: scale(0.9);
        padding: 2px 3px;
        -webkit-transform: scale(0.9);
    }
    .st-urge {
        position: absolute;
        top: 77.5%;
        left: 36.5%;
        border: 1px solid rgb(0, 240, 255);
        background: #00f0ff;
        border-radius: 5px;
        color: #152565;
        font-size: 10px;
        transform: scale(0.9);
        padding: 2px 3px;
        -webkit-transform: scale(0.9);
    }
    .st-epidemic {
        position: absolute;
        top: 84.5%;
        left: 50%;
        transform: translate(-50%, -50%);
        color: #fff;
        font-size: 16px;
    }
    .st-epidemics {
        position: absolute;
        top: 87.5%;
        left: 50%;
        transform: translate(-50%, -50%);
        color: #fff;
        font-size: 10px;
        text-align: center;
        width: 100%;
    }
    .st-share {
        position: absolute;
        top: 92.5%;
        width: 90%;
        height: 35px;
        left: 5%;
        border: 1px solid rgb(21, 37, 101);
        background: #00f0ff;
        font-size: 21px;
        text-align: center;
        line-height: 35px;
        border-radius: 20px;
        letter-spacing: 1px;
    }
}
